<!--
 * @Author: zhouyaxue
 * @Date: 2022-10-10 17:01:10
 * @LastEditors: zhouyaxue
 * @LastEditTime: 2022-12-29 10:13:41
-->
<template>
  <el-menu class="menu" :default-active="router.currentRoute.value.meta.current ? router.currentRoute.value.meta.current : router.currentRoute.value.path" :default-openeds="router.currentRoute.value.meta.active" background-color="rgba(0,0,0,0)" text-color="#fff" active-text-color="#516BFF" :unique-opened="true" router @close="closeList" @select="navClick">
    <template v-for="(item) in defineProp.data" :key="item.path">
      <!-- <img :src="require(item.icon)"></img> -->
      <el-sub-menu v-if="item.childList && item.childList.length>0 && item.isShow" class="child" :index="String(item.path)">
        <template #title>
          <img v-if="item.icon" :src="item.icon">
          <span>{{ item.title }}</span>
        </template>
        <side-nav :data="item.childList" />
        <!--  @navClick="navClick" -->
      </el-sub-menu>
      <el-menu-item v-else-if="item.isShow" class="child childItem" :index="String(item.path)" @click="navGo(item.path)">
        <div>
          <img v-if="item.icon" :src="item.icon">
          <span>{{ item.title }}</span>
        </div>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
// import { ref } from 'vue';
// import { onMounted, watch } from 'vue-demi';
import { useRouter } from "vue-router";
const defineProp: any = defineProps({
  data: {
    type: Array,
    default: () => [{}],
    required: true,
  },
});
const emit = defineEmits(["navClick"]);

const router = useRouter();
function closeList() {
  //key: string, keyPath: string[]
  // console.log(key, keyPath,'ppp');
}
function navClick(key: string) {
  if (key) {
    emit("navClick", key);
  }
}
function navGo(path: string) {
  //path: string
  router.push({
    path: path,
  });
}
</script>

<style lang="scss" scoped>
.el-menu {
  // background-color: rgba(0,0,0,0);
  border-right: 0;
  .is-active {
    background: #0085ff;
    font-size: 14px;
    // font-family: Abel-Regular, Abel;
    font-weight: 400;
    color: #ffffff;
  }
}
::v-deep .el-menu-item .el-sub-menu__title {
  font-size: 16px;
  margin-bottom: 0px;
}
::v-deep .el-sub-menu__title {
  margin-bottom: 0px;
}

::v-deep .el-menu-item {
  display: flex;
  width: 185px;
  height: 32px;
  background: #1d3f86;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  font-size: 14px;
  // font-family: Abel-Regular, Abel;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 32px;
  margin-bottom: 13px;
  div {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    img {
      margin-right: 11px;
    }
  }
  .el-sub-menu__title {
    font-size: 16px;
    margin-bottom: 0px;
  }
}
::v-deep .el-sub-menu .el-menu-item {
  padding-left: 46px !important;
  font-size: 16px;
  min-width: 100px;
}
::v-deep .el-sub-menu .el-sub-menu__icon-arrow {
  right: 3px;
}
::v-deep .el-sub-menu {
  .el-sub-menu__title {
    img {
      margin-right: 11px;
    }
  }
}
</style>